<template>
  <div class="box">
    <ul>
      <li><img src="@/assets/test/1.png" alt="" /><p>项目归档交接清单</p></li>
      <li><img src="@/assets/test/2.png" alt="" /><p>环境条件监控记录表</p></li>
      <li><img src="@/assets/test/3.png" alt="" /><p>检测委托合同单</p></li>
      <li><img src="@/assets/test/4.png" alt="" /><p>合同协议评审表</p></li>
      <li><img src="@/assets/test/5.png" alt="" /><p>与客户要求沟通说明书 </p></li>
      <li><img src="@/assets/test/6.png" alt="" /><p>被测产品与环境接收确认检查表</p></li>
      <li><img src="@/assets/test/7.png" alt="" /><p>项目进度及风险跟踪表</p></li>
      <li><img src="@/assets/test/8.png" alt="" /><p>项目归档交接清单</p></li>
      <li><img src="@/assets/test/9.png" alt="" /><p>环境条件监控记录表</p></li>
      <li><img src="@/assets/test/10.png" alt="" /><p>检测委托合同单</p></li>
      <li><img src="@/assets/test/11.png" alt="" /><p>合同协议评审表</p></li>
      <li><img src="@/assets/test/12.png" alt="" /><p>与客户要求沟通说明书 </p></li>
      <li><img src="@/assets/test/13.jpg" alt="" /><p>被测产品与环境接收确认检查表</p></li>
      <li><img src="@/assets/test/14.png" alt="" /><p>项目进度及风险跟踪表</p></li>
      <li><img src="@/assets/test/15.png" alt="" /><p>项目进度及风险跟踪表</p></li>
      <li><img src="@/assets/test/16.png" alt="" /><p>项目进度及风险跟踪表</p></li>
      <li><img src="@/assets/test/17.png" alt="" /><p>项目进度及风险跟踪表</p></li>
      <li><img src="@/assets/test/18.png" alt="" /><p>项目进度及风险跟踪表</p></li>
      <li><img src="@/assets/test/19.png" alt="" /><p>项目进度及风险跟踪表</p></li>
      <li><img src="@/assets/test/20.png" alt="" /><p>项目进度及风险跟踪表</p></li>
    </ul>
  </div>
</template>
<script>
const lis = document.querySelectorAll('li')
console.log('lis', lis)
</script>
<style scoped>
* {
  /* 初始化 取消页面的内外边距 */
  padding: 0;
  margin: 0;
}

.box {
  /* 弹性布局 使页面元素水平+垂直居中 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* 使页面占屏幕总高 */
  height: 100vh;
  /* 背景的渐变色 */
  background-image: linear-gradient(rgb(219, 232, 255), rgb(196, 218, 255));
}

.box ul {
  height: 620px;
  /* 超出部分隐藏 */
  overflow: hidden;
  display: flex;
  flex-wrap: nowrap;
  /* 过渡为0.3秒 */
  transition: all .3s;
}

.box ul li {
  /* 相对定位 */
  box-shadow: rgba(100, 100, 111, 0.7) 0px 7px 29px 0px;
  position: relative;
  /* float: left; */
  list-style-type: none;
  width: 60px;
  height: 100%;
  /* 过渡为0.5秒 */
  transition: all .5s;
}
.box ul li img{
  width: 600px;
  height: 100%;
  object-fit: cover;
}
.box ul li p {
  /* 绝对定位 */
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 30px;
  line-height: 30px;
  text-align: center;
  font-size: 14px;
  font-weight: 700;
  color: #fff;
  /* 文字遮罩层 */
  background-color: rgba(0, 0, 0, .3);
  transition: all .3s;
}

.box ul li:hover p {
  font-size: 20px;
}

/* 鼠标移入时让所有的li宽度变为90px */
/* .box ul:hover li {
  width: 60px;
} */

/* 鼠标移入时让当前的宽度变为640px */
.box ul li:hover {
  width: 50%;
}
</style>